<template>
  <!-- 商品类指标 -->
  <div style="padding:20px">
    <el-card class="box-card">
      <div style="color:#666;font-size:20px;">
        <span style="text-align: center;display:block">
          <i class="el-icon-notebook-2" style="margin-right: 5px" />
          商品指标
          <el-date-picker
            v-model="timeFilter"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          />
          <el-button type="primary" style="margin-left:10px" @click="timeQuery">查询</el-button>
        </span>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display:block;text-align: center;">
        <span style="font-weight: bold;color: #666;font-size: 15px;">总体数据</span>
      </div>
      <div>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">点击量：{{ data.totalData.click }}次</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">收获好评：{{ data.totalData.praise }}个</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">收获差评：{{ data.totalData.bad }}个</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">已售出图书：{{ data.totalData.sales }}本</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">已支付：{{ data.totalData.pay | num2Point }}￥</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">图书库存量：{{ data.totalData.stock }}本</div>
          </el-card>
        </el-col>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display:block;text-align: center;">
        <span style="font-weight: bold;color: #666;font-size: 15px;">排行</span>
      </div>
      <div>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
          <!-- <div class="title">下单最多图书</div> -->
          <div class="title">最受欢迎图书类型</div>
          <div class="content">
            <el-table
              :data="data.rank.mostPurchaseCategory"
              height="250"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="number"
                label="排名"
                width="50"
              />
              <el-table-column
                prop="name"
                label="图书类别"
                width="180"
              />
              <el-table-column
                style="width:50px"
                prop="num"
                label="总购买量"
                width="85"
              />
              <!-- <el-table-column
                style="width:50px"
                prop="rate"
                label="升降"
                width="85"
              /> -->
            </el-table>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
          <div class="title">好评最多图书</div>
          <div class="content">
            <el-table
              :data="data.rank.mostPraiseBook"
              height="250"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="number"
                label="排名"
                width="50"
              />
              <el-table-column
                prop="book_name"
                label="书名"
                width="180"
              />
              <el-table-column
                style="width:50px"
                prop="praise"
                label="好评数"
                width="85"
              />
            </el-table>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
          <div class="title">点击最多图书</div>
          <div class="content">
            <el-table
              :data="data.rank.mostClickBook"
              height="250"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="number"
                label="排名"
                width="50"
              />
              <el-table-column
                prop="book_name"
                label="书名"
                width="180"
              />
              <el-table-column
                style="width:50px"
                prop="hot_click"
                label="点击量"
                width="85"
              />
            </el-table>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
          <div class="title">销售额最多图书</div>
          <div class="content">
            <el-table
              :data="data.rank.mostSaleBook"
              height="250"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="number"
                label="排名"
                width="50"
              />
              <el-table-column
                prop="book_name"
                label="书名"
                width="180"
              />
              <el-table-column
                style="width:50px"
                prop="sales"
                label="销售额"
                width="85"
              >
                <template slot-scope="scope">
                  {{ scope.row.sales | num2Point }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display:block;text-align: center;">
        <span style="font-weight: bold;color: #666;font-size: 15px;">风控指标</span>
      </div>
      <div>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
          <div class="title">图书下架率</div>
          <el-tooltip placement="top-end">
            <div slot="content" style="font-size: 12px;">
              <div style="padding: 3px;">
                网上书城
              </div>
              <div style="padding: 3px">
                下架图书:{{ data.risk.unShelveRate[0].unShelveBook }}
              </div>
              <div style="padding: 3px">
                总图书:{{ data.risk.unShelveRate[0].totalBook }}
              </div>
            </div>
            <div class="content">
              <el-progress type="circle" :percentage="parseFloat(data.risk.unShelveRate[0].rate)" />
            </div>
          </el-tooltip>
          <div class="footer">下架图书 / 总图书</div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
          <div class="title">图书好评率</div>
          <el-tooltip placement="top-end">
            <div slot="content" style="font-size: 12px;">
              <div style="padding: 3px;">
                网上书城
              </div>
              <div style="padding: 3px">
                好评数:{{ data.risk.praiseRate[0].praise }}
              </div>
              <div style="padding: 3px">
                总评:{{ data.risk.praiseRate[0].totalEvaluate }}
              </div>
            </div>
            <div class="content">
              <el-progress type="circle" :percentage="parseFloat(data.risk.praiseRate[0].rate)" />
            </div>
          </el-tooltip>
          <div class="footer">好评 / 总评</div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
          <div class="title">图书差评率</div>
          <el-tooltip placement="top-end">
            <div slot="content" style="font-size: 12px;">
              <div style="padding: 3px;">
                网上书城
              </div>
              <div style="padding: 3px">
                差评数:{{ data.risk.badRate[0].bad }}
              </div>
              <div style="padding: 3px">
                总评:{{ data.risk.badRate[0].totalEvaluate }}
              </div>
            </div>
            <div class="content">
              <el-progress type="circle" :percentage="parseFloat(data.risk.badRate[0].rate)" />
            </div>
          </el-tooltip>
          <div class="footer">差评 / 总评</div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
          <div class="title">图书评价率</div>
          <el-tooltip placement="top-end">
            <div slot="content" style="font-size: 12px;">
              <div style="padding: 3px;">
                网上书城
              </div>
              <div style="padding: 3px">
                评价数:{{ data.risk.evaluateRate[0].evaluate }}
              </div>
              <div style="padding: 3px">
                订单量:{{ data.risk.evaluateRate[0].totalEvaluate }}
              </div>
            </div>
            <div class="content">
              <el-progress type="circle" :percentage="parseFloat(data.risk.evaluateRate[0].rate)" />
            </div>
          </el-tooltip>
          <div class="footer">评价 / 订单量</div>
        </el-col>
      </div>
    </el-card>
    <el-row style="display:block;text-align: center;">
      <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="24" style="margin-bottom: 10px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #666;font-size: 15px">物流选择</span>
          </div>
          <div class="chart-wrapper">
            <pieChart :logistics="data.logistics.logistics" />
          </div>
        </el-card>
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #666;font-size: 15px">图书库存实时监控（没意义）</span>
          </div>
          <div>
            <v-chart :options="memoryInfo" />
          </div>
        </el-card>
      </el-col> -->
    </el-row>
    <div>
      <el-row :gutter="6">
        <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="24" style="margin-bottom: 10px;height:600px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #666;font-size: 15px">图书库存变化</span>
            </div>
            <div>
              <lineChart :chart-data="data.stockChange" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
import LineChart from '@/components/Echarts/LineChart'
import PieChart from '@/components/Echarts/PieChart'
import { getGoodsInfo } from '@/api/data.js'

export default {
  name: 'BookAnalysis',
  components: {
    // 'v-chart': ECharts,
    LineChart,
    PieChart
  },
  data() {
    return {
      data: {
        'totalData': {
          'click': 0,
          'pay': 0,
          'praise': 0,
          'bad': 0,
          'sales': 0,
          'stock': 0
        },
        'rank': {
          'mostPurchaseCategory': [],
          'mostPraiseBook': [],
          'mostClickBook': [],
          'mostSaleBook': []
        },
        'risk': {
          'unShelveRate': [
            {
              'totalBook': 0,
              'rate': 0.00,
              'unShelveBook': 0
            }
          ],
          'praiseRate': [
            {
              'totalEvaluate': 0,
              'rate': 0.00,
              'praise': 0
            }
          ],
          'badRate': [
            {
              'bad': 0,
              'totalEvaluate': 0,
              'rate': 0.00
            }
          ],
          'evaluateRate': [
            {
              'totalEvaluate': 0,
              'rate': 0.00,
              'evaluate': 0
            }
          ]
        },
        'logistics': {
          'logistics': []
        },
        'stockChange': {
          'x': [],
          'y': []
        }
      },
      timeFilter: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      count: 0,
      loading: true,
      memoryInfo: {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          interval: 20
        },
        series: [{
          data: [],
          type: 'line',
          areaStyle: {
            normal: {
              color: 'rgb(32, 160, 255)' // 改变区域颜色
            }
          },
          itemStyle: {
            normal: {
              color: '#6fbae1',
              lineStyle: {
                color: '#6fbae1' // 改变折线颜色
              }
            }
          }
        }]
      },
      lineChartData: ''
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.cancelLoading()
  },
  methods: {
    init() {
      getGoodsInfo().then(data => {
        this.data = data
        this.loading = false
      })
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    timeQuery() {
      getGoodsInfo(this.timeFilter[0], this.timeFilter[1]).then(data => {
        // 物流信息为空时设置默认值
        if (data.logistics.logistics.length < 1) {
          data.logistics.logistics = [
            {
              'name': '暂无数据',
              'value': 0
            }
          ]
        }
        this.data = data
        this.loading = false
        this.$message({
          message: '查询成功',
          type: 'success'
        })
      }).catch(err => {
        this.$message.warning(err)
        this.timeFilter = ''
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .box-card {
    margin-bottom: 5px;
    span {
      margin-right: 28px;
    }
    .el-icon-refresh {
      margin-right: 10px;
      float: right;
      cursor:pointer;
    }
  }
  .cpu, .memory, .swap, .disk  {
    width: 20%;
    float: left;
    padding-bottom: 20px;
    margin-right: 5%;
  }
  .title, .footer {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #999;
    height: 25px;
    line-height: 25px;
  }
  .content {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
  }
</style>
